<div class="row mt-3 justify-content-center">
    <div class="col-lg-6 col-md-8 col-sm-10">
      <div class="card">
        <div class="card-header">
          <h3>Register</h3>
        </div>
        <div class="card-body">
          <%= if (errors) { %>
            <%= for (key, val) in errors { %>
              <div class="alert alert-danger alert-dismissible fade show m-1" role="alert">
                    <%= val %>
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
              </div>
              <% } %>
          <% } %>
          <form action="<%= usersRegisterPath() %>" method="POST" novalidate>
            <%= csrf() %>
            <div class="form-group">
              <label for="email">Email address</label>
              <input type="email" name="Email" class="form-control" id="email">
            </div>
            <div class="form-group">
              <label for="username">Username</label>
              <input type="text" name="Username" id="username" class="form-control">
            </div>
            <div class="form-group">
              <label for="pwd1">Password</label>
              <input name="Password" type="password" class="form-control" id="pwd1">
            </div>
            <div class="form-group">
              <label for="passwordConfirm">Confirm password</label>
              <input name="PasswordConfirm" type="password" class="form-control" id="passwordConfirm">
            </div>
            <button type="submit" class="btn btn-primary btn-block">Register</button>
          </form>
        </div>
      </div>
    </div>
  </div>
